{% extends "base.html" %}
<!-- 页首  here -->
{% block headers %}
  <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">
{% endblock %}

{% block contend %}

<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <!--<h3 class="box-title">Data Table With Full Features</h3>-->
                <a class="box-title" href="/masq"><b>Masq列表</b></a> /
                <a class="box-title" href="/masq/add"><b>添加域名</b></a>

                <div class="box-tools">
                <div class="input-group input-group-sm" style="width: 150px;">
                <!--<input type="text" name="table_search" class="form-control pull-right" placeholder="Search">-->
                <div class="input-group-btn">
                    <!--<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>-->
                <a href="/masq/update"><button type="submit" class="btn btn-default">一键更新<i class="fa fa-refresh"></i></button></a>
                </div>
                </div>
                </div>
            </div>

            <!-- /.box-header -->
            <div class="box-body">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>域名</th>
                        <th>IP</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>最近修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                     {% if data%}
                    {% for i in data %}
                    <tr>
                        <td>{{i.get('id')}}</td>
                        <td>{{i.get('domain')}}</td>
                        <td>{{i.get('ip')}}</td>
                        <td>
                            {% if i.get('status')==0 %}
                            <span class="label label-success">启用</span>
                            {% else %}
                            <span class="label label-warning">禁用</span>
                            {% endif %}
                        <td>{{ i['create_time']|date_time }}</td>
                        <td>{{i.get('update_time')|date_time}}</td>
                        <td>
                            <a href="/masq/edit?id={{i.get('id')}}"><span class="label label-primary">编辑</span></a>

                            <a href="/masq/action?id={{i.get('id')}}&active=enable"><span
                                    class="label label-success">启用</span></a>
                            <a href="/masq/action?id={{i.get('id')}}&active=disble"><span
                                    class="label label-warning">禁用</span></a>
                            <a href="/masq/action?id={{i.get('id')}}&active=delete"><span
                                    class="label label-danger">删除</span></a>

                        </td>
                    </tr>
                    {%endfor%}
                    {%endif%}


                    </tbody>
                    <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>域名</th>
                        <th>IP</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>最近修改时间</th>
                        <th>操作</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
</div>


{% endblock %}

{% block footerjs %}
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<!--<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>-->
<!-- FastClick -->
<!--<script src="/static/plugins/fastclick/fastclick.js"></script>-->
<!-- AdminLTE App -->
<!--<script src="/static/dist/js/app.min.js"></script>-->
<!-- AdminLTE for demo purposes -->
<!--<script src="/static/dist/js/demo.js"></script>-->

<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });

</script>
{% endblock %}